    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格正选反选</title>
        <script src="../jquery-3.4.1.js"></script>
        <style>
            table{
                margin:100px auto;
                border-collapse: collapse;
                width: 330px;
                height: 200px;
            }
            table tr,td{
                border: 1px solid #e0d9dc;
                text-align: center;
            }
            table td{
                /*width:110px;*/
                height: 30px;
            }
            table thead td{
                background: #1a91e2;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>名称</td>
                <td>描述</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>梅西</td>
                <td>他是一名伟大的球员</td></tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>总裁</td>
                <td>他只是一名一般的球员</td></tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>吴劲松</td>
                <td>他是一个看球的</td></tr>
            </tbody>
        </table>
        <script>
            // 对比attr与prop区别 prop仅仅针对于表单操作
              $(function () {
                    // $("input:checkbox").prop("checked",true)
                  // if ($("thead input:checkbox")===true){
                  //
                  // }
                  // 点击事件
                  $("thead input:checkbox").on("click",function () {
                      $("tbody input:checkbox").prop("checked",$(this).prop("checked"));//prop获取属性与赋值属性
                      console.log($("thead input:checkbox").prop("checked")===true)
                  })
                  $("tbody input:checkbox").on("click",function () {
                      if ( $("tbody input:checkbox").length===$("tbody input:checked").length){
                          $("thead input:checkbox").prop("checked",true);
                      }else {
                          $("thead input:checkbox").prop("checked",false);
                      }
                  })
              })
        </script>
    </body>
    </html>